<template>
  <section>
    <div>
      <transition>
        <sup
          v-text="value"
          class="sz-badge__content"
          :class="['sz-badge__content--' + type]"
        >
          <!--<slot></slot>-->
        </sup>
      </transition>
    </div>
  </section>
</template>
<script>
export default {
  name: "sz-badge",
  props: {
    value: { type: String, default: "badge" },
    type: { type: String, default: "danger" }
  },
  data() {
    return {};
  }
};
</script>
<style scoped>
  .sz-badge__content {
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    color: #fff;
    font-size: 14px;
    border-radius: 13px;
    height: 20px;
    line-height: 20px;
    padding: 2px 8px;
    border: 1px solid #fff;
  }

  .sz-badge__content--danger {
    background-color: #f56c6c;
  }

  .sz-badge__content--warning {
    background-color: #f8ac59;
  }

  .sz-badge__content--success {
    background-color: #67c23a;
  }
</style>
